<template>

	<view class="flowLaunch-v">
		<u-toast ref="uToast"></u-toast><!-- 弹窗 -->
		<u-image width="70%" :src="url" mode="widthFix" class="image-class"></u-image>

		<view class="block-class">

			<u-input v-model="barcode" :type="type" :border="border" class="input-class" placeholder="请扫描唛头开启摄像"
				:focus="focused" @focus="onFocus" @input="scanbarcode" />

		</view>

		<view style="display: flex;">

			<view class="left-block-class">


				<view class="bottom-class">
					<u-icon name="camera-fill" :color=" mainStatus == 1 ? '#00aa00' :'#a39fa0' " size="50"></u-icon>
					<text class="text-class">{{ mainStatus == 1 ? '录像中' : '未开启'}}


					</text>

				</view>
				<view>

					<text class="num-class">{{mainName}}</text>
				</view>
				<text class="num-class"> {{mainIp}}</text>
			</view>
			<view class="right-block-class">


				<view class="bottom-class">
					<u-icon name="camera-fill" :color=" viceStatus == 1 ? '#00aa00' :'#a39fa0' " size="50"></u-icon>
					<text class="text-class">{{ viceStatus == 1 ? '录像中' : '未开启'}}</text>
				</view>
				<view>

					<text class="num-class">{{viceName}}</text>
				</view>
				<text class="num-class">{{viceIp}}</text>
			</view>
		</view>

		<view class="buttom-actions">

			<u-button class="buttom-btn" @click="startMain" type="info">{{camera}}</u-button>
			<!-- <u-button class="buttom-btn" type="primary" @click="startVice">
				开启次摄
			</u-button> -->

		</view>


		<view class="com-addBtn" @click="addPage()">
			<u-icon name="order" size="60" color="#fff" />
		</view>

	</view>


</template>

<script>
	import {
		qmsbasecameralineip,
		updateqmsbusicameraorder,
		addqmsbusicameraorder
	} from '@/api/q1/business/camera/camera.js'
	import {
		nextTick
	} from "vue"

	export default {
		data() {
			return {

				url: '/static/scan.gif',
				barcode: '',
				type: 'text',
				border: true,
				disabled: true,
				focused: true,
				mainIp: '',
				viceIp: '',
				lineCode: '',
				lineName: '',
				mainStatus: '',
				mainName: '',
				viceStatus: '',
				viceName: '',
				camera: '开启主摄'


			}
		},
		watch: {

		},
		onReady() {

		},
		onShow() {
			this.getList()
		},
		onLoad(e) {

			uni.setNavigationBarTitle({
				title: '产线:' + e.lineCode + "/" + e.lineName
			})
			this.keyword = e.lineName
			this.lineCode = e.lineCode
			this.lineName = e.lineName
		},

		methods: {

			getList() {
				let query = {

					lineCode: this.lineCode
				}
				qmsbasecameralineip(query).then(res => {

					if (res.data.list[0]) {

						this.mainIp = res.data.list[0].ipAddress;
						this.mainName = res.data.list[0].ipType;
						this.mainStatus = res.data.list[0].status;
						
						console.log(this.mainStatus)
						if(this.mainStatus === 1){
							this.camera = '关闭主摄'
						}else{
							this.camera = '开启主摄'
						}
					}

					if (res.data.list[1]) {
						this.viceIp = res.data.list[1].ipAddress;
						this.viceName = res.data.list[1].ipType;
						this.viceStatus = res.data.list[1].status;

					}

				})
			},
			//开启主摄
			startMain() {
				let data = {
					lineCode: this.lineCode,
					lineName: this.lineName,
					ipAddress: this.mainIp,
					IpType: this.mainName,

				}
				updateqmsbusicameraorder(data).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						duration: 1000,
					});
					this.$nextTick(() => {
						this.getList();
						if (this.camera == '开启主摄') {
							this.camera = '关闭主摄'
						} else {
							this.camera = '开启主摄'
						}

					})

				})
			},
			//开启副摄
			startVice() {

				if (this.barcode != '') {

					let data = {

						lineCode: this.lineCode,
						lineName: this.lineName,
						ipAddress: this.viceIp,
						IpType: this.viceName,
						order: this.barcode


					}
					addqmsbusicameraorder(data).then(res => {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							duration: 1000,
						});
						this.$nextTick(() => {
							this.getList();
							this.barcode = ''
						})
					})
				} else {
					this.$refs.uToast.show({
						title: "请扫描唛头",
						type: 'error',
						duration: 1000,
					});

				}
			},
			onFocus() {

				// #ifdef APP-PLUS

				uni.hideKeyboard();

				// #endif
			},

			//扫描条码
			scanbarcode(event) {

				if (this.barcode != '') {

					let data = {

						lineCode: this.lineCode,
						lineName: this.lineName,
						ipAddress: this.viceIp,
						IpType: this.viceName,
						order: this.barcode


					}
					addqmsbusicameraorder(data).then(res => {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							duration: 1000,
						});
						this.$nextTick(() => {
							this.getList();
							this.barcode = ''
						})
					})
				} else {
					this.$refs.uToast.show({
						title: "请扫描唛头",
						type: 'error',
						duration: 1000,
					});

				}

			},
			addPage() {
				uni.navigateTo({
					url: '/pages/q1/business/camera/history?lineName=' + this.keyword
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.flowLaunch-v {
		width: 100%;

	}

	.input-class {
		margin-left: 10rpx;
		margin-right: 10rpx;
		text-align: center;
		height: 80rpx;
	}

	.image-class {

		margin: auto;
		padding: 40rpx;

	}

	.block-class {

		margin-top: 40rpx;
		margin-left: 80rpx;
		margin-right: 40px;
		box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.2);
		padding: 20rpx;
		border-radius: 8rpx;
	}

	.left-block-class {

		text-align: center;
		margin-top: 40rpx;
		margin-left: 80rpx;
		box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.2);
		padding: 10rpx;
		border-radius: 8rpx;
		width: 270rpx;
		height: 160rpx;
	}

	.right-block-class {
		text-align: center;
		margin-top: 40rpx;
		margin-left: 40rpx;
		box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.2);
		padding: 10rpx;
		border-radius: 8rpx;
		width: 270rpx;
		height: 160rpx;

	}

	.num-class {
		font-size: 30rpx;
	}

	.bottom-class {

		display: flex;

		justify-content: center;
	}

	.text-class {
		font-size: 28rpx;
		margin-left: 10rpx;
		line-height: 30px;
		/* 与高度相同 */
	}
</style>